<template>
    <view class="container">
        <view class="container__search">
            <uv-sticky>
                <uv-input prefix-icon="search" prefix-icon-style="color:#000" shape="circle" border="none"
                    placeholder="搜索你感兴趣的测评"
                    :customStyle='{background:"#fff",height:"60rpx",padding:"10rpx 20rpx"}'></uv-input>
            </uv-sticky>
        </view>
        <view class="container__tabs">
            <uv-tabs :list="[{name:'全部'},{name:'行业动态'},{name:'亲子关系'},{name:'专注力训练'},{name:'情绪管理'}]"
                :activeStyle="{color:'#000',padding:'10rpx 20rpx',fontWeight:'bold'}"
                :customStyle='{display:"inline-block"}' lineColor="transparent"
                :itemStyle="{height:'auto',padding:'0'} " :inactiveStyle="{padding:'10rpx 20rpx',color:'#6b6e7e'}">
                <template v-slot:right>
                    <view style="padding-left: 4px;">
                        <uv-icon name="list" size="21" bold color="#000"></uv-icon>
                    </view>
                </template>
            </uv-tabs>
        </view>
        <view class="container__content">
            <Card titleBarStyle="slot">
                <template #content>
                    <view v-for="i in 4" class="item" @click="toDetail">
                        <List title="心理健康，从了解开始--心之翔心理测评，守护你的每一份情绪。" :titleBlod="true" subTitle="探索你的性格类型,了解行为模式与职业倾向"
                            extraInfoLayout="normal" imageHeight="120" imageWidth="120" imagePosition="right"
                            extraLabel="行业趋势" extraLabelStyle="text" :extraInfo='["1.22万阅读","280评论","650点赞"]'
                            extraLabelColor='#9E4CD1' imageRadius="20rpx" />
                    </view>
                </template>
            </Card>
        </view>
    </view>
</template>
<script lang="ts" setup>
    import Card from "@/components/Card.vue";
    import List from "@/components/ListComponent.vue";
    const toDetail = () => {
        uni.navigateTo({
            url: "/pages/article/detail"
        })
    }
</script>
<style lang="scss" scoped>
    .container {
        min-height: 100vh;
        background-color: #c7c8fa;

        &__search {
            padding: 0rpx 20rpx;
            padding-top: 30rpx;
        }

        &__content {
            .item {
                padding: 15rpx;
            }

            .item:not(:last-child) {

                border-bottom: 1px #f0f2f5 solid;
            }
        }
    }
</style>